<template>
	<view class="container">
		<view class="header">
			<view class="item" @tap="toDetail(1)">
				<view class="left">
					<view class="title-box">
						<view class="title">
							{{type==0?'今日错题':'今日收藏'}}
						</view>
						<view v-if="num1>0" class="red-circle">

						</view>
					</view>
					<view class="text">
						新增{{num1}}题
					</view>
				</view>
				<image
					src="https://q-api.guguzi.com/api/file/download/i0aFausY7Y_9d91f2d7-f3a6-4151-aa91-d0eccf44ab02.png"
					class="icon"></image>
				<!-- <image src="https://q-api.guguzi.com/api/file/download/4jGbkEhgWO_1d125428-a15d-407f-93ca-e3b9f6bc20ad.png" mode="" class="icon"></image> -->
			</view>
			<view class="item" @tap="toDetail(0)">
				<view class="left">
					<view class="title">
						{{type==0?'全部错题':'全部收藏'}}
					</view>
					<view class="text">
						共{{num2}}题
					</view>
				</view>
				<image
					src="https://q-api.guguzi.com/api/file/download/RgtDu43IJT_7a32eb93-4354-4d9f-aed1-b413d8707936.png"
					mode="" class="icon"></image>
			</view>
		</view>
		<view class="content">
			<view class="top">
				<view class="title">
					{{type==0?'错题详情':'收藏详情'}}
				</view>
				<view class="right" v-if="type==0" @tap="show=true">
					<u-icon name="setting" size="40"></u-icon>
					<!-- trash star star-fill -->
					<view class="">
						移除设置
					</view>
				</view>
			</view>
			<view class="types">
				<view class="item" @tap="toDetail">
					<view class="left">
						<view class="num">
							1
						</view>
						<view class="">
							单选题
						</view>
					</view>
					<view class="right">
						<view class="">
							{{num2}}题
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="num">
							2
						</view>
						<view class="">
							判断题
						</view>
					</view>
					<view class="right">
						<view class="">
							0题
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="num">
							3
						</view>
						<view class="">
							多选题
						</view>
					</view>
					<view class="right">
						<view class="">
							0题
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="show" @confirm="confirm" @cancel="cancel" :columns="columns" keyName="name" valueName="id" itemHeight="70"></u-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick,
		computed
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin
	} from "@/common"
	const show = ref(false)
	const columns = reactive([
		[
			{
				name:'答对不自动移除',
				id:-1
			},
			{
				name:'答对1次自动移除',
				id:1
			},
			{
				name:'答对3次自动移除',
				id:3
			}
		]
	])
	let pageNumber = 1
	let pageSize = 10
	const num1 = ref(0)
	const num2 = ref(0)
	const type = ref(0)
	const list =ref([])
	onLoad((options) => {
		type.value = options.type
		const arr = ['我的错题', '我的收藏']
		uni.setNavigationBarTitle({
			title: arr[type.value]
		})
		if(type.value==0){
			$http.get("questionLog", {
				pageNumber: pageNumber,
				pageSize: pageSize,
				today:1,
				type:1
			}).then(res=>{
				num1.value = res.total
			})
			$http.get("questionLog", {
				pageNumber: pageNumber,
				pageSize: pageSize,
				type:1
			}).then(res=>{
				num2.value = res.total
				list.value = res.data
			})
		}else{
			$http.get("userCollection", {
				pageNumber: pageNumber,
				pageSize: pageSize,
				today:1
			}).then(res=>{
				num1.value = res.length
			})
			$http.get("userCollection", {
				pageNumber: pageNumber,
				pageSize: pageSize
			}).then(res=>{
				num2.value = res.length
				list.value = res||[]
			})
		}
	})
	onShow(() => {

	})
	onHide(() => {

	})
	onUnload(() => {

	})
	function toDetail(val) {
		uni.navigateTo({
			url: "/pages/home/errorCollects?type="+type.value+"&params="+val
		})
	}
	function confirm(val){
		console.log(val.value[0].id,'val')
		$http.post("removeSettings",{times:val.value[0].id}).then(res=>{
			show.value=false
		})
	}
	function cancel(){
		show.value=false
	}
	
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #F9F9F9;
		padding: 40rpx 20rpx;

		.header {
			display: flex;
			justify-content: space-between;

			.item {
				width: 49%;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 20rpx;

				.left {
					.title {
						font-size: 34rpx;
						font-weight: bold;
						margin-bottom: 18rpx;
						position: relative;
					}

					.title-box {
						display: flex;

						.red-circle {
							width: 12rpx;
							height: 12rpx;
							background-color: red;
							border-radius: 50%;
						}
					}

					.text {
						font-size: 26rpx;
					}

					.text {
						color: #696969;
					}
				}

				.icon {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.content {
			background-color: #fff;
			padding: 40rpx 20rpx 20rpx 20rpx;
			margin-top: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 34rpx;
					font-weight: bold;
				}

				.right {
					display: flex;
					align-items: center;

					view {
						margin-left: 10rpx;
					}
				}
			}

			.types {
				margin-top: 20rpx;

				.item {
					display: flex;
					justify-content: space-between;
					padding: 34rpx 0;

					.left {
						display: flex;
						align-items: center;

						.num {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #1667EA;
							color: #fff;
							margin-right: 20rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>